<template>
  <div class="order-detail-info">
    <van-tabs v-model="active" color="#4D98FF" title-active-color="#4D98FF" @click="handleTab">
      <van-tab title="工单详情" name="1">
        <detail-order />
      </van-tab>
      <van-tab title="流转日志" name="2">
        <log-order />
      </van-tab>
      <van-tab v-if="stepId != ''" title="流转操作" name="3">
        <operate-order v-if="stepId != 'a016'" />
        <evaluate-order v-if="stepId == 'a016'" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import detailOrder from '@/views/components/order/detail.vue'
import logOrder from '@/views/components/order/logs.vue'
import operateOrder from '@/views/components/order/operate.vue'
import evaluateOrder from '@/views/components/order/evaluate.vue'

export default {
  components: { detailOrder, logOrder, operateOrder, evaluateOrder },
  data() {
    return {
      active: '1',
      stepId: this.$route.query.stepId || ''
    }
  },
  methods: {
    handleTab(name) {
      this.active = name
    },
  }
}
</script>
<style lang="less" scoped>
.van-tabs {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /deep/ .van-tabs__content {
    overflow-y: auto;
  }
}
</style>

